<template>
  <div>
    <div class="box" :class="isOpen?'':'close'">
      <div class="toggle" @click="toggle">
        <span :class="{xuanzhuan: !isOpen}">❤</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOpen: true
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  },
}
</script>
<style>
  .box {
    height: 600px;
    width: 250px;
    background-color: pink;
    position: relative;
    transition: all 0.3s;
  }
  .toggle {
    width: 50px;
    height: 50px;
    background-color: skyblue;

    position: absolute;
    top: 0;
    right: -50px;
  }
  .close {
    transform: translateX(-250px);
  }
  span {
    line-height: 50px;
    text-align: center;
    display: block;
  }
  .xuanzhuan {
    transform: rotate(180deg);
  }
</style>